<template>
  <div class="page">
    <div class="navbar no-shadow">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>

          </a>
        </div>
        <div class="title navbar-calendar-title"></div>
      </div>
    </div>
    <div class="page-content">
      <div id="calendar" class="block block-strong no-padding no-margin no-hairline-top"></div>
      <div id="calendar-events" class="list no-margin no-hairlines no-safe-area-left">
        <ul>
          ${eventItems.length > 0 && eventItems.map((item) => $h`
          <li class="item-content">
            <div class="event-color" style="background-color: ${item.color}"></div>
            <div class="item-inner">
              <div class="item-title">${item.title}</div>
              <div class="item-after">${item.time}</div>
            </div>
          </li>
          `)}
          ${eventItems.length === 0 && $h`
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title text-color-gray">No events for this day</div>
            </div>
          </li>
          `}
        </ul>
      </div>
    </div>
  </div>
</template>
<style>
  #calendar,
  #calendar-events {
    height: 50%;
    box-sizing: border-box;
  }

  #calendar .calendar {
    height: 100%;
  }

  #calendar-events ul {
    height: 100%;
    overflow: auto;
  }

  #calendar-events .event-color {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
  }

  @media (orientation: landscape) {
    #calendar {
      float: left;
    }

    #calendar,
    #calendar-events {
      height: 100%;
    }

    #calendar,
    #calendar-events {
      width: 50%;
    }

    #calendar-events {
      margin-left: 50% !important;
      border-left: 1px solid #eee;
    }

    .dark #calendar-events {
      border-left-color: #282828;
    }
  }
</style>
<script>
  export default (props, { $f7, $, $el, $update, $on }) => {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();

    let calendar;
    let eventItems = [];
    const today = new Date(year, month, day);
    const events = [
      {
        date: new Date(year, month, day),
        hours: 12,
        minutes: 30,
        title: 'Meeting with Vladimir',
        color: '#2196f3',
      },
      {
        date: new Date(year, month, day),
        hours: 18,
        minutes: 0,
        title: 'Shopping',
        color: '#4caf50',
      },
      {
        date: new Date(year, month, day),
        hours: 21,
        minutes: 0,
        title: 'Gym',
        color: '#e91e63',
      },
      {
        date: new Date(year, month, day + 2),
        hours: 16,
        minutes: 0,
        title: 'Pay loan',
        color: '#2196f3',
      },
      {
        date: new Date(year, month, day + 2),
        hours: 21,
        minutes: 0,
        title: 'Gym',
        color: '#ff9800',
      },
    ];

    const renderEvents = (calendar) => {
      var currentDate = calendar.value[0];
      var currentEvents = events
        .filter(function (event) {
          return (
            event.date.getTime() >= currentDate.getTime() &&
            event.date.getTime() < currentDate.getTime() + 24 * 60 * 60 * 1000
          );
        });

      eventItems = [];
      if (currentEvents.length) {
        currentEvents.forEach(function (event) {
          const hours = event.hours;
          let minutes = event.minutes;
          if (minutes < 10) minutes = `0${minutes}`;
          eventItems.push({
            title: event.title,
            time: `${hours}:${minutes}`,
            color: event.color,
          });
        });
      }
      $update();
    }

    $on('pageInit', () => {
      var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      calendar = $f7.calendar.create({
        containerEl: '#calendar',
        toolbar: false,
        value: [today],
        events: events,
        on: {
          init: function (calendar) {
            $('.navbar-calendar-title').text(monthNames[calendar.currentMonth] + ', ' + calendar.currentYear);
            $f7.navbar.size($f7.navbar.getElByPage($el.value));
            calendar.$el.addClass('no-safe-area-right');
            renderEvents(calendar);
          },
          monthYearChangeStart: function (calendar) {
            $('.navbar-calendar-title').text(monthNames[calendar.currentMonth] + ', ' + calendar.currentYear);
            $f7.navbar.size($f7.navbar.getElByPage($el.value));
          },
          change: function (calendar) {
            renderEvents(calendar);
          },
        }
      });
    })

    $on('pageBeforeRemove', () => {
      calendar.destroy();

    })

    return $render;
  };
</script>
